<template>
  <div class="demo">
    <div>
      zoom: {{zoom }}
      <button @click="getDrivingRoute">获取驾驶路线</button>
      <button @click="isPointInRect">判断是否在矩形框内</button>
      <textarea rows="5" v-text="showPointText"/>
      <textarea rows="5" v-text="drivingRouteText"/>
    </div>
    <div class="map-container">
      <div class="map" :id="mapId"/>
    </div>
  </div>
</template>

<script>
  import {wgs84ToBd09, wgs84ToGcj02} from '@/common/lonlat-convertor';
  import {initMap} from '@/common/baidu-map';
  import BMap from 'BMap';
  import {byhPoints} from './mock-data';
  import {Point, Bounds, Polygon} from '../../common/geoutils.js';
  import GeoUtils from '../../common/geoutils.js';

  const normalStyle = {
    enableEditing: false, // 是否启用线编辑，默认为false
    strokeWeight: '1', // 折线的宽度，以像素为单位
    strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
    strokeColor: '#E7E7E7', // 折线颜色
  };

  const warnStyle = {
    enableEditing: false, // 是否启用线编辑，默认为false
    strokeWeight: '5', // 折线的宽度，以像素为单位
    strokeOpacity: 0.8, // 折线的透明度，取值范围0 - 1
    strokeColor: '#FF0000', // 折线颜色
  };

  const lineStyle = {
    enableEditing: false, // 是否启用线编辑，默认为false
    // // ICONS 不能复用
    // icons: [new BMap.IconSequence(new BMap.Symbol(window.BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
    //   scale: 0.5, // 图标缩放大小
    //   strokeColor: '#fff', // 设置矢量图标的线填充颜色
    //   strokeWeight: '2' // 设置线宽
    // }), '10', '30')],
    strokeWeight: '5', // 折线的宽度，以像素为单位
    strokeOpacity: 0.2, // 折线的透明度，取值范围0 - 1
    strokeColor: 'red', // 折线颜色
  };

  const polylineStyle = {
    enableEditing: true, // 是否启用线编辑，默认为false
    strokeWeight: '3', // 折线的宽度，以像素为单位
    strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
    strokeColor: 'red', // 折线颜色
  };
  export default {
    name: 'Ivista',
    data() {
      return {
        mapId: `map${Number.parseInt(Math.random() * 999999, 10)}`,
        map: null,
        zoom: 12,
        showPointText: '',
        drivingRoute: null, // 驾驶路线
        drivingRouteText: '',
        lineStyle: null,
        markerMap: {},
      };
    },
    mounted() {
      this.$nextTick(() => {
        const zoom = this.zoom;
        const centerPoint = wgs84ToGcj02(116.59351698364257, 40.12398206446024);
        const map = this.map = initMap(this.mapId, [centerPoint.lon, centerPoint.lat], zoom);

        // 用于标点
        const marker = new BMap.Marker(new BMap.Point(106.493328, 29.685237), {
          enableDragging: true,
        });
        // 拖动覆盖物后发生的事件
        marker.addEventListener('dragend', (type, target, pixel, point) => {
          const {lng, lat} = marker.getPosition();
          this.showPointText = JSON.stringify(`{lon:${lng}, lat:${lat}}`);
        });
        map.addOverlay(marker);

        // 缩放事件，结束触发
        map.addEventListener('zoomend', () => {
          this.zoom = map.getZoom();
        });

        // 通过DrivingRoute获取一条路线的point
        this.drivingRoute = new BMap.DrivingRoute(map, {
          renderOptions: {
            map,
            autoViewport: true,
          },
        });
        // 白云湖路线
        map.addOverlay(new BMap.Polyline(byhPoints.reduce((points, item) => {
          points.push(new BMap.Point(item.lng, item.lat));
          return points;
        }, []), lineStyle));

        const a ={"sw":{"lon":116.59351698364257,"lat":40.15084678697852},"ne":{"lon":116.72226301635742,"lat":40.24660044885337},"swPoint":{"lon":116.60740587253146,"lat":40.164735675867405},"nePoint":{"lon":116.70837412746853,"lat":40.232711559964486}};


        const sw1 = a.sw;
        const ne1 = a.ne;

        const db1 = new BMap.Marker(new BMap.Point(ne1.lon, ne1.lat));
        db1.setLabel(new BMap.Label('东北点-db1'));
        map.addOverlay(db1);

        const dn1 = new BMap.Marker(new BMap.Point(sw1.lon, sw1.lat));
        dn1.setLabel(new BMap.Label('西南点-dn1'));
        map.addOverlay(dn1);

        const points1 = [
          new BMap.Point(ne1.lon, ne1.lat),
          new BMap.Point(ne1.lon, sw1.lat),
          new BMap.Point(sw1.lon, sw1.lat),
          new BMap.Point(sw1.lon, ne1.lat),
        ];

        const polygon1 = new BMap.Polygon(points1, {strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5}); // 创建多边形
        map.addOverlay(polygon1); // 增加多边形

        const sw2 = a.swPoint;
        const ne2 = a.nePoint;

        const db2 = new BMap.Marker(new BMap.Point(ne2.lon, ne2.lat));
        db2.setLabel(new BMap.Label('东北点-db2'));
        map.addOverlay(db2);

        const dn2 = new BMap.Marker(new BMap.Point(sw2.lon, sw2.lat));
        dn2.setLabel(new BMap.Label('西南点-dn2'));
        map.addOverlay(dn2);
        const points2 = [
          new BMap.Point(ne2.lon, ne2.lat),
          new BMap.Point(ne2.lon, sw2.lat),
          new BMap.Point(sw2.lon, sw2.lat),
          new BMap.Point(sw2.lon, ne2.lat),
        ];

        const polygon2 = new BMap.Polygon(points2, {strokeColor: 'red', strokeWeight: 2, strokeOpacity: 0.5}); // 创建多边形
        map.addOverlay(polygon2); // 增加多边形

        const points = [
          new BMap.Point(116.387112, 39.920977),
          new BMap.Point(116.385243, 39.913063),
          new BMap.Point(116.394226, 39.917988),
          new BMap.Point(116.401772, 39.921364),
          new BMap.Point(116.41248, 39.927893)
        ];
        const polygon = new BMap.Polygon(points, {strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5}); // 创建多边形
        map.addOverlay(polygon); // 增加多边形

        map.addEventListener('click', (e) => {
          console.log('click', e.point);
          console.log('click.polygon', polygon.getBounds());
          const {He, Le, Vd, Xd} = polygon.getBounds();
          const db = new BMap.Marker(new BMap.Point(He, Vd));
          db.setLabel(new BMap.Label('东北点'));
          map.addOverlay(db);

          const dn = new BMap.Marker(new BMap.Point(He, Xd));
          dn.setLabel(new BMap.Label('东南点'));
          map.addOverlay(dn);

          const xb = new BMap.Marker(new BMap.Point(Le, Vd));
          xb.setLabel(new BMap.Label('西北点'));
          map.addOverlay(xb);

          const xn = new BMap.Marker(new BMap.Point(Le, Xd));
          xn.setLabel(new BMap.Label('西南点'));
          map.addOverlay(xn);

          // new BMap.Point(116.387112, 39.920977),
          //   new BMap.Point(116.385243, 39.913063),
          //   new BMap.Point(116.394226, 39.917988),
          //   new BMap.Point(116.401772, 39.921364),
          //   new BMap.Point(116.41248, 39.927893)
          // const point = new Point(116.390847, 39.920786);
          // new Polygon()
          // GeoUtils.isPointInPolygon(point)

          const clickPoint = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
          clickPoint.setLabel(new BMap.Label('鼠标点击'));
          map.addOverlay(clickPoint);

          const findPoint = new Point(e.point.lng, e.point.lat);
          const bounds = new Bounds(Le, Xd, He, Vd);
          const isIn = GeoUtils.isPointInRect(findPoint, bounds);
          const path = points.reduce((arr, curr) => {
            arr.push(new Point(curr.lng, curr.lat));
            return arr;
          }, []);

          const isIn1 = GeoUtils.isPointInPolygon(findPoint, new Polygon(bounds, path));
          console.log('isIn', isIn, isIn1);
        });
      });
    },
    methods: {
      getPoint(markerObj, zoom) {
        const {minZoom} = markerObj;
        const {lon, lat} = zoom < minZoom ? markerObj[minZoom] : markerObj[zoom];
        return new BMap.Point(lon, lat);
      },
      getDrivingRoute() {
        const {map, drivingRoute} = this;
        drivingRoute.search(
          new BMap.Point(106.492755, 29.685387),
          new BMap.Point(106.492189, 29.685364),
          {
            waypoints: [ // waypoints表示途经点
              new BMap.Point(106.491421, 29.68794),
              new BMap.Point(106.491417, 29.690039),
              new BMap.Point(106.495684, 29.690529),
              new BMap.Point(106.487805, 29.688462),
              new BMap.Point(106.485133, 29.685999),
            ],
          });
        drivingRoute.setPolylinesSetCallback((r) => {
          const points = [];
          r.forEach((item) => {
            points.push(...item.getPolyline().getPath());
          });
          this.drivingRouteText = JSON.stringify(points);
        });
      },
      isPointInRect() {
        // new BMap.Point(116.387112, 39.920977),
        //   new BMap.Point(116.385243, 39.913063),
        //   new BMap.Point(116.394226, 39.917988),
        //   new BMap.Point(116.401772, 39.921364),
        //   new BMap.Point(116.41248, 39.927893)
        // const point = new Point(116.390847, 39.920786);
        // new Polygon()
        // GeoUtils.isPointInPolygon(point)
      }
    },
  };
</script>
